<template>
    <div class="fieldManage zy-content ">
        <search :columns="searchData" @getSearch="getSearch(arguments)" key="search"></search>
        <div class="list-layout mt16">
            <div class="btns clear">
                <span class="title">{{ $t('common.listInformation') }}</span>
                <Button @click="showAddModal">{{ $t('common.New') }}</Button>
            </div>
            <div class="tableContent">
                <Table ellipsis ref="selection" class="resizable-table" border @on-column-width-resize="onColumnWidthResize"
                    :columns="columnsList" :data="tableData" @on-selection-change="onSelectChange">
                    <template slot-scope="{ row }" slot="action">
                        <span class="operationBtn" @click="showAddModal(row)"><i class="iconfont zy-common-bianji"></i>{{
                            $t('common.Edit') }}</span>
                        <span class="operationBtn" @click="(deleteModal = true), (deleteIds = [row.id])"><i
                                class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}</span>
                    </template>
                </Table>
            </div>

            <div class="pageWrap mt16">
                <pageLeftTitle :total="pageHelper.total" :selected="deleteIds.length" />
                <Page :total="pageHelper.total" :page-size="pageHelper.pageSize" :page-size-opts="$variable.pageSizes"
                    :current="pageHelper.pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize"
                    show-sizer show-total />
            </div>
        </div>
        <Modal :mask-closable="false" v-model="addModal" :title="addtitle" class="modal-content-layout">
            <Form ref="formValidate" class="formList" :model="formItem" :rules="getRules" label-position="top"
                v-if="addModal">
                <FormItem label="班组" prop="team">
                    <Input :placeholder="`${$t('common.inputInfo')}`" type="text" v-model="formItem.team" />
                </FormItem>
                <FormItem label="班组负责人" prop="teamLeaderNumber">
                    <Select v-model="formItem.teamLeaderNumber" @on-change="obtainValue" filterable multiple
                        :placeholder="`${$t('common.selectInfo')}`">
                        <Option v-for="item of userList" :value="item.id" :key="item.id" :label="item.name" />
                    </Select>
                </FormItem>
                <FormItem label="人员" prop="personnelNumber">
                    <Select v-model="formItem.personnelNumber" @on-change="obtainValue" filterable multiple
                        :placeholder="`${$t('common.selectInfo')}`">
                        <Option v-for="item of userList" :value="item.id" :key="item.id" :label="item.name" />
                    </Select>
                </FormItem>
                <FormItem label="备注" prop="remarks">
                    <Input :placeholder="`${$t('common.inputInfo')}`" type="textarea" v-model="formItem.remarks" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" @click="addModal = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" :loading="loading" @click="handleSubmit('formValidate')">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false" v-model="deleteModal" :title="$t('common.Delete')" class="modal-title-layout">
            <div class="icon red">
                <i class="iconfont zy-common-shanchu"></i>
            </div>
            <p class="title">
                <span>{{ $t('common.confirmDelete') }}</span>
            </p>
            <div slot="footer">
                <Button type="default" @click="deleteModal = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" @click="handleDelete">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { findOrgByToken, getCompany, selectDeviceList } from "@/api/index.js";
import search from "@/components/curd/searchList.vue";
import recursion from "@/util/recursion";
import fileDownload from "js-file-download";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: "workTeam",
    components: { search },
    mixins: [toggleTableOperation],
    data() {
        return {
            searchParams: {},
            searchData: [{
                title: '班组',
                key: "team",
                type: "select",
                dicUrl: '/dms/productionTeam/getTeamList',
                params: {
                    label: "team",
                    value: "team",
                },
            }],
            columns: [
                {
                    key: "selection",
                    type: "selection",
                    width: 60,
                    align: "center",

                },
                {
                    title: '班组',
                    key: 'team',
                    align: 'center',

                    resizable: true,
                    tooltip: true,
                },
                {
                    title: '班组负责人',
                    key: 'teamLeader',
                    align: 'center',
                    width: 180,
                    resizable: true,
                    tooltip: true,
                },
                {
                    title: '人员',
                    key: 'personnelName',
                    align: 'center',
                    width: 470,
                    resizable: true,
                    tooltip: true,
                },
                {
                    title: '维护时间',
                    key: 'creationTime',
                    align: 'center',
                    resizable: true,
                    width: 180,
                    tooltip: true,
                },
                {
                    title: '维护人',
                    key: 'maintainer',
                    align: 'center',
                    resizable: true,
                    width: 180,
                    tooltip: true,
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: 'action',
                    align: 'center',
                    fixed: "right",
                    width: 180
                }
            ],
            tableData: [],
            pageSizeOption: [10, 20, 30, 40],
            pageHelper: {
                pageSize: 10,
                pageNum: 1,
                total: 0,
            },
            loading:false,
            checkBtnPermission: {},
            userList: [],
            companyList: [],
            deviceList: [],
            deviceList2: [],
            importExcelState: false,
            deleteIds: [],
            addModal: false,
            formItem: {},
            addtitle: '',
            getRules: {
                team: [
                    { required: true, type: 'string', message: this.$t('common.selectInfo'), trigger: "change" },
                ],
                teamLeaderNumber: [
                    { required: true, type: 'array', message: this.$t('common.selectInfo'), trigger: "change" },
                ],
                personnelNumber: [
                    { required: true, type: 'array', message: this.$t('common.selectInfo'), trigger: "change" },
                ],
            },
            deleteModal: false
        }
    },
    created() {
        this.getTableColumnsWidth(this.columns)
    },
    methods: {
        getSearch(params) {
            this.searchParams = JSON.parse(JSON.stringify(params[0]));
            this.pageNum=1;
            this.searchList();
        },
        reset() {
            this.searchParams = {};
            this.changeNum();
        },
        changeNum() {
            this.pageHelper.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageHelper.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageHelper.pageNum = val;
            this.searchList();
        },
        searchList() {//查询列表
            let params = {
                pageNum: this.pageHelper.pageNum,
                pageSize: this.pageHelper.pageSize,
                ...this.searchParams
            };
            this.axios({
                method: 'post',
                url: '/dms/productionTeam/getProductionTeamList',
                data: params,
            }).then(res => {
                if (res.code === 200) {
                    this.tableData = res.data.records;
                    this.pageHelper.total = res.data.total;
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        },
        companySelectChange(val) {
            // this.getDeviceList(val);
        },
        getUserList() {
            this.axios({
                method: "get",
                url: "/dms/productionTeam/getUserList",
            }).then((res) => {
                if (res.code === 200) {
                    this.userList = res.data;
                }
            });
        },
        handleCasChange(val, selectedData) {
            this.searchParams.orgId = val[val.length - 1];
            this.searchParams.orgName = selectedData[selectedData.length - 1].label;
            // this.getDeviceList();
        },

        onSelectChange(selection) {
            this.deleteIds = selection.map((item) => item.id);
        },
        obtainValue(e) {
            console.log(e, 1111);
        },
        async showAddModal(row) {
            if (row.id) {
                this.addtitle = `${this.$t('common.Edit')}`
                this.formItem = {
                    ...row,
                    // belongCompanyId: row.belongCompanyId,
                    // orgId: row.orgIds,
                    // deviceId: Number(row.deviceId),
                    // beat: '' + row.beat,
                    // id: row.id
                };
                // await this.getDeviceList(2);
            } else {
                this.addtitle = `${this.$t('common.New')}`
                this.formItem = {}
                this.deviceList2 = []
                // this.$refs['formValidate'].resetFields()
            }
            this.addModal = true
        },
        // 新增提交
        handleSubmit(form) {
            
            this.$refs[form].validate((valid) => {
                if (valid) {
                    const params = {
                        ...this.formItem,
                        // teamLeader: this.formItem.teamLeader.join(','),
                        // belongCompanyId: this.formItem.belongCompanyId,
                        // orgId: this.formItem.orgId.at(-1),
                        // deviceId: this.formItem.deviceId,
                        // beat: +this.formItem.beat,
                        maintainer: window.localStorage.getItem('ziyunFactoryPortalName')
                    };
                    if (this.formItem.id) params.id = this.formItem.id;
                    this.loading=true;
                    this.axios({
                        method: "post",
                        url: `/dms/productionTeam/${this.formItem.id ? "updateProductionTeam" : "addProductionTeam"
                            }`,
                        data: params,
                    }).then((res) => {
                        if (res.code === 200) {
                            this.addModal = false
                            this.changeNum();
                            this.$Message.success(res.msg);
                        } else {
                            this.$Message.warning({
                                content: res.msg,
                                duration: 6,
                                closable: true,
                            });
                        }
                        this.loading=false;
                    });
                }
            });
        },
        // 删除操作
        handleDelete() {
            this.axios({
                method: "DELETE",
                url: "/dms/productionTeam/deleteById",
                params: { id: this.deleteIds[0] },
            }).then((res) => {
                if (res.code === 200) {
                    this.deleteModal = false;
                    this.$Message.success(res.msg);
                    this.changeNum();
                    this.deleteIds = []
                } else {
                    this.$Message.warning({
                        content: res.msg,
                        duration: 6,
                        closable: true,
                    });
                }
            });
        },
        // 批量删除
        deleteAll() {
            if (this.deleteIds.length == 0) {
                this.$Message.warning({
                    content: `${this.$t('common.deleteItems')}`,
                    duration: 6,
                    closable: true,
                });
                return;
            } else {
                this.deleteModal = true;
            }
        },

    },
    mounted() {
        this.searchList();
        this.getUserList();
    }
}
</script>

<style scoped lang="scss">
.fieldManage {
    .formList {
        padding: 30px;

        .btn {
            margin-top: 20px;
            text-align: center;
            width: 100%;
            height: 40px;
        }

        .inputBorder {
            border: 1px solid #dcdee2;
            border-radius: 4px;
        }
    }
}
</style>

<style lang="scss"></style>
